<script setup>
import { onMounted } from 'vue'
let canvas, context
function autoSetSize () {
  canvasSetSize()
  // 当执行这个函数的时候，会先设置canvas的宽高
  function canvasSetSize () {
    // 把变化之前的画布内容copy一份，然后重新画到画布上
    let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
    let pageWidth = document.documentElement.clientWidth
    let pageHeight = document.documentElement.clientHeight

    canvas.width = pageWidth
    canvas.height = pageHeight
    context.putImageData(imgData, 0, 0)
  }
}
function listenToUser () {
  // 定义一个变量初始化画笔状态
  let painting = false
  // 记录画笔最后一次的位置
  let lastPoint = { x: undefined, y: undefined }

  // 鼠标按下事件
  canvas.onmousedown = function (e) {
    painting = true
    let x = e.clientX
    let y = e.clientY
    lastPoint = { x: x, y: y }
    drawCircle(x, y, 5)
  }

  // 鼠标移动事件
  canvas.onmousemove = function (e) {
    if (painting) {
      let x = e.clientX
      let y = e.clientY
      let newPoint = { x: x, y: y }
      drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
      lastPoint = newPoint
    }
  }

  // 鼠标松开事件
  canvas.onmouseup = function () {
    painting = false
  }
}

// 画点函数
function drawCircle (x, y, radius) {
  // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
  context.beginPath()
  // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
  // 从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
  context.arc(x, y, radius, 0, Math.PI * 2)
  // 通过填充路径的内容区域生成实心的图形
  context.fill()
  // 闭合路径之后图形绘制命令又重新指向到上下文中。
  context.closePath()
}

function drawLine (x1, y1, x2, y2) {
  // 设置线条宽度
  context.lineWidth = 10
  // 设置线条末端样式。
  context.lineCap = 'round'
  // 设定线条与线条间接合处的样式
  context.lineJoin = 'round'
  // moveTo(x,y)将笔触移动到指定的坐标x以及y上
  context.moveTo(x1, y1)
  // lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线
  context.lineTo(x2, y2)
  // 通过线条来绘制图形轮廓
  context.stroke()
  context.closePath()
}

function initCanvas () {
  canvas = document.getElementById('canvas')
  context = canvas.getContext('2d')
  let pageWidth = document.documentElement.clientWidth
  let pageHeight = document.documentElement.clientHeight

  canvas.width = pageWidth
  canvas.height = pageHeight
}
onMounted(() => {
  initCanvas()
  autoSetSize()
  listenToUser()
})
</script>
<template>
  <canvas id="canvas"></canvas>
  <!-- 自定义背景颜色功能尚未完善好 -->
  <!--<div class="bg-btn"></div>
    <div class="color-group" id="bgGroup">
        <h3>选择背景颜色:</h3>
        <ul class="clearfix">
            <li class="bgcolor-item" style="background-color: blue;"></li>
            <li class="bgcolor-item" style="background-color: black;"></li>
            <li class="bgcolor-item" style="background-color: #FF3333;"></li>
            <li class="bgcolor-item" style="background-color: #0066FF;"></li>
            <li class="bgcolor-item" style="background-color: #FFFF33;"></li>
            <li class="bgcolor-item" style="background-color: #33CC66;"></li>
            <li class="bgcolor-item" style="background-color: gray;"></li>
            <li class="bgcolor-item" style="background-color: #F34334;"></li>
            <li class="bgcolor-item" style="background-color: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);"></li>
            <li class="bgcolor-item" style="background-color: #9B27AC;"></li>
            <li class="bgcolor-item" style="background-color: #4CB050;"></li>
            <li class="bgcolor-item" style="background-color: #029688;"></li>
        </ul>
        <i class="closeBtn"></i>
    </div>-->
  <div class="tools">
    <div class="container">
      <button class="save" id="save" title="保存"></button>
      <button class="brush active" id="brush" title="画笔"></button>
      <button class="eraser" id="eraser" title="橡皮擦"></button>
      <button class="clear" id="clear" title="清屏"></button>
      <button class="undo" id="undo" title="撤销"></button>
      <button class="redo" id="redo" title="再做"></button>
    </div>
  </div>
  <div class="pen-detail" id="penDetail">
    <i class="closeBtn"></i>
    <p>笔大小</p>
    <span class="circle-box"><i id="thickness"></i></span>
    <input type="range" id="range1" min="1" max="10" value="1" />
    <p>笔颜色</p>
    <ul class="pen-color clearfix">
      <li class="color-item active" style="background-color: black"></li>
      <li class="color-item" style="background-color: #ff3333"></li>
      <li class="color-item" style="background-color: #99cc00"></li>
      <li class="color-item" style="background-color: #0066ff"></li>
      <li class="color-item" style="background-color: #ffff33"></li>
      <li class="color-item" style="background-color: #33cc66"></li>
    </ul>
    <p>不透明度</p>
    <i class="showOpacity"></i>
    <input type="range" id="range2" min="1" max="10" value="1" />
  </div>
</template>
<script></script>
<style lang="" scoped></style>
